<template>
  <div class="sale-time">
    <div v-for="(hours, index) in showTimes" :key="index" class="sale-time-row">
      <div
        v-for="item in hours"
        :key="item.time"
        class="sale-time-item"
        :class="item.status ? '' : 'disabled'"
      >
        <span class="sale-time-hour">{{ item.time }}</span>
        <div class="sale-time-tag" @click="handleSelect(item)">
          <div v-if="item.status" class="sale-time-tag--icon yuan" />
          <span>{{ item.status ? $t('canSale') : $t('noSale') }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    saleTimes: {
      type: Array,
      default: () => []
    },
    startTime: Number,
    endTime: Number
  },
  computed: {
    showTimes() {
      return this.formatSaleTimes(this.saleTimes);
    }
  },
  methods: {
    formatSaleTimes(saleTimes) {
      const showTimes = [];
      for (let i = this.startTime; i < this.endTime; i++) {
        const hourStr = `${i < 10 ? '0' : ''}${i}`;
        showTimes.push([
          {
            time: `${hourStr}:00`,
            status: saleTimes.includes(`${hourStr}:00`)
          },
          {
            time: `${hourStr}:30`,
            status: saleTimes.includes(`${hourStr}:30`)
          }
        ]);
      }
      return showTimes;
    },
    handleSelect(item) {
      if (!item.status) return;
      this.$emit('select', item.time);
    }
  }
};
</script>

<style lang="scss" scoped>
.sale-time {
  width: 100%;
  padding: 12px;
  .sale-time-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .sale-time-item {
      width: 50%;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      .sale-time-hour {
        margin: 0 6px;
      }
      .sale-time-tag {
        margin: 0 10px;
        width: 70%;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border-radius: 16px;
        background-color: #2bb26f;
        color: #fff;
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis;
        padding: 0 6px;
        .sale-time-tag--icon {
          display: inline-block;
          vertical-align: middle;
        }
        span {
          vertical-align: middle;
        }
        .yuan {
          width: 12px;
          height: 12px;
          border: 1px solid #fff;
          border-radius: 50%;
          margin-right: 3px;
        }
        .squera {
          width: 12px;
          height: 12px;
          border: 1px solid #fff;
          margin-right: 3px;
        }
      }

      &.disabled {
        .sale-time-tag {
          color: #b7b7b7;
          background: #fff;
          border: 1px solid #ccc;
        }
      }
    }
  }
}
</style>
